<template>
	<view class="home-page">
		<!--  -->
		<view class="banner">
			<template v-if="info.videoUrl">
				<video v-show="active === 'video'" 
				style="width: 100%;height: 100%;" 
				:src="info.videoUrl"
				@play="videoPlayIng = true"
				@pause="videoPlayIng = false"
				></video>
				<view class="switch"
				v-if="!videoPlayIng"
				:class="{
					active_1: active === 'video',
					active_2: active === 'img',
				}">
					<view @click="active = 'video'" class="item video">视频</view>
					<view @click="active = 'img'" class="item img">图片</view>
				</view>
			</template>
			<!-- v-if="!info.videoUrl || active === 'img'"  -->
			<van-swipe :autoplay="3000" lazy-render style="height: 100%;width: 100%;">
			  <van-swipe-item v-for="image in info.imgUrls" :key="image">
			    <van-image
			      width="100%"
			      height="100%"
				  fit="contain"
			      :src="image"
			    />
			  </van-swipe-item>
			</van-swipe>
		</view>
		<view class="content">
			<view class="hander">
				<view class="title">{{ info.name }}</view>
				<van-space direction="horizontal">
					<view class="bb" :class="{
						active: speechIng
					}" @click="playAudio(info.audioUrl)">
						<text>播报</text>
					</view>
					<view class="dh" @click="mapNavigation">
						<text>导航</text>
					</view>
				</van-space>
			</view>
			<view class="blur_bg"></view>
			<view class="card_list">
				<view class="card">
					<view class="title title_1">阵地简介</view>
					<van-text-ellipsis 
						:rows="4"
						:content="info.introduction" 
						expand-text="展开"
						collapse-text="收起" />
				</view>
				<view class="card">
					<view class="title title_2">廉洁文化亮点</view>
					<van-text-ellipsis 
						:rows="4"
						:content="info.highlights" 
						expand-text="展开"
						collapse-text="收起" />
				</view>
				<view class="card">
					<view class="title title_3">参观信息</view>
					<van-cell-group>
					  <van-cell title="预约方式：" :value="info.visitInfo" />
					  <van-cell title="预约电话：" center :value="info.bookingLine">
						  <template #right-icon>
							  <van-icon @click="callPhone(info.bookingLine)" name="phone" size="1.5em" color="#0f78ff"/>
						  </template>
					  </van-cell>
					  <van-cell title="阵地地址：" :value="info.address" />
					</van-cell-group>
				</view>
			</view>
			<view style="height: 1px; background:linear-gradient(to left,transparent 0%,transparent 50%,#fff 50%,#fff 100%);background-size: 55rpx 1px;background-repeat: repeat-xmargin-top: 10rpx;"></view>
			<view class="footer">
				<div class="icons"></div>
				<div style="display: flex;margin-top: 30rpx;">
					<div>资料来源：</div>
					<div style="flex:1;">{{info.dataSource}}</div>
				</div>
				<div style="display: flex;margin-top: 20rpx;">
					<div>后期制作：</div>
					<div style="flex:1;">{{info.make}}</div>
				</div>
				<!-- <van-cell title="资料来源：" :value="info.visitInfo" />
				<van-cell title="后期制作：" :value="info.visitInfo" /> -->
			</view>
		</view>
	</view>
</template>

<script>
	import { reactive } from 'vue'
	import { request, apis} from '@/commn/api/index.js'
	import { Swipe, SwipeItem,Image,Space,TextEllipsis, Cell, CellGroup , Icon,showConfirmDialog} from 'vant';
	import Speech from 'speak-tts'
	import { callPhone,mapNavigation,isAppH5,isIOS } from '@/utils/app.js'
	export default {
		components: {
			[Swipe.name]:Swipe,
			[SwipeItem.name]:SwipeItem,
			[Image.name]:Image,
			[Space.name]:Space,
			[TextEllipsis.name]:TextEllipsis,
			[CellGroup.name]:CellGroup,
			[Cell.name]:Cell,
			[Icon.name]:Icon,
		},
		data() {
			return {
				infoId: '',
				info: {
					"address": "",
					"bookingLine": "",
					"highlights": "",
					"id": 0,
					"imgUrls": [
						// 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
						// 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
					],
					"introduction": "",
					"latitude": "",
					"longitude": "",
					"summary": "",
					"videoUrl": "",
					"visitInfo": ""
				},
				active: 'video',
				speech:null,
				speechIng: false,
				videoPlayIng: false
			}
		},
		onLoad(options) {
			const _this = this
			this.infoId = options.id
			this.getInfo()
			// this.speechInit()
			const audio = new Audio();
			audio.onplay = function(){
				_this.speechIng = true
			}
			audio.onpause = function(){
				_this.speechIng = false
			}
			this.audio = audio
		},
		methods: {
			getInfo(){
				request({
					url: apis.details + '/'+this.infoId,
					method: 'POST',
				}).then(res=>{
					console.log(res)
					this.info = res.data?.result
				})
			},
			speechInit(){
				this.speech = new Speech();
				this.speech?.setLanguage("zh-CN");
				this.speech?.init().then(() => {
					alert('语音播报初始化完成')
				});
			},
			playAudio: async function(url) {
				const audio = this.audio//new Audio(url);
				if(this.speechIng) {
					this.audio?.pause()
				}else {
					if(!url) return
					if(this.audio.src != url) {
						this.audio.src = url
					}
					try {
						await audio.play();
					} catch (error) {
						showConfirmDialog({
							title: '提示',
							message:'由于浏览器策略限制，需确认后方可播放新消息提示音！',
						}).then(() => {
							audio.play();
						});
					}
				}
			},
			speak(){
				let text = `${this.info.summary},阵地简介：${this.info.introduction}。廉洁文化亮点：${this.info.highlights}`
				
				if(this.speech.speaking()) {
					this.speech.cancel();
					this.speechIng = false
					return;
				}
				const _this = this
				this.speech?.speak({ 
					text: text,
					listeners: {
						onstart: () => {
							_this.speechIng = true
						},
						onend:()=>{
							_this.speechIng = false
						}
					}
				})
			},
			callPhone(phone) {
				if(!phone) return
				if(isAppH5()) {
					phone && callPhone(phone)
				}else {
					window.location.href = `tel:${phone}`
				}
			},
			mapNavigation(){
				// ios: 'iosamap://navi?sourceApplication=mingyue&poiname=${name}&lat=${lat}&lon=${lng}&dev=0&t=2'
				// android: 'androidamap://viewMap?sourceApplication=mingyue&poiname=${name}&lat=${lat}&lon=${lng}&dev=0&t=2'
				if(isAppH5()) {
					if(this.info.latitude && this.info.longitude) {
						mapNavigation(this.info.latitude,this.info.longitude)
					}
				}else if(isIOS()) {
					window.location.href = `iosamap://navi?sourceApplication=mingyue&lat=${this.info.latitude}&lon=${this.info.longitude}&dev=0&t=2`
				}else {
					window.location.href =`androidamap://viewMap?sourceApplication=mingyue&lat=${this.info.latitude}&lon=${this.info.longitude}&dev=0&t=2`
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.home-page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.home-page {
		::v-deep .van-swipe__indicator {
			border: 1px solid #fff;
		}
		::v-deep .van-swipe__indicators {
			bottom: 70upx;
		}
		::v-deep .van-text-ellipsis {
			text-indent: 2em;
		}
		::v-deep .van-cell__title {
			text-align: right;
			flex: 0 1 6em;
			color: #8f8f8f;
			white-space:nowrap;
		}
		::v-deep .van-cell__value {
			color: #333;
			text-align: left;
		}
	}
	.home-page {
		.banner {
			position: relative;
			height: 390rpx;
			width: 750rpx;
			background-color: #000;
			padding-bottom: 40rpx;
		}
		.switch {
			display: flex;
			position: absolute;
			left: 50%;
			bottom: 60rpx;
			transform: translateX(-50%);
			z-index: 999;
			background-color: #fff;
			border-radius: 25rpx;
			height: 44rpx;
			border: 1px solid #eddbaf;
			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				color: #333;
				font-size: 22rpx;
				line-height: 1;
				padding: 0 1em;
				z-index: 1;
			}
			&::after {
				display: block;
				content: ' ';
				position: absolute;
				left: 1px;
				top: 1px;
				width: calc(50% - 1px);
				height: calc(100% - 2px);
				border-radius: 23rpx;
				background-color: #eddbaf;
				transition: transform 1000;
			}
			&.active_1::after  {
				transform: translateX(0);
			}
			&.active_2::after {
				transform: translateX(100%);
			}
			&.active_1 {
				.item:nth-of-type(1) {
					color: #fff;
				}
			}
			&.active_2 {
				.item:nth-of-type(2) {
					color: #fff;
				}
			}
		}
		.content {
			flex: 1;
			width: 750rpx;
			/* transform: translateY(-40rpx); */
			margin-top: -40rpx;
			min-height: calc(100vh - 350rpx);
			/* border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx; */
			border-radius : 30rpx 30rpx 0px 0px;
			background-color: #fff;
			background-image: linear-gradient(#f6e5c3,#f3d4a7);
			overflow: hidden;
			z-index: 1;
		}
		.hander {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding:10px 30rpx 0px 30rpx;
			background-color: #fff;
			/* box-shadow: 0 0 10rpx 1rpx #fff; */
			z-index: 1;
			.title {
				font-size: 36rpx;
			}
			.bb,.dh {
				text-align: center;
				font-size: 26rpx;
				color: #0f78ff;
				min-width: 2.4em;
				padding-top: 2.2em;
				background-size: auto 2em; 
				background-position: top;
				background-repeat: no-repeat;
			}
			.bb {
				background-image: url('../../static/icons/CQGSsmall.png');
				// &.active {
				// 	background-image: url('../../static/icons/语音播报.png');
				// }
			}
			.dh{
				background-image: url('../../static/icons/导航.png');
			}
		}
		.blur_bg {
			margin-top: -1px;
			height: 20rpx;
			width: 100%;
			z-index: 1;
			/* background-color: rgba(255, 255, 255,0.5); */
			background-image: linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0));
		}
		.card_list {
			margin-top: 10rpx;
			padding: 0 28rpx;
			overflow: hidden;
		}
		.card {
			border-radius: 10rpx;
			background-color: #fff;
			padding: 0 30rpx 26rpx 30rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
			.title {
				padding: 6rpx;
				padding-left: 2em;
				margin: 24rpx 0 30rpx 0;
				font-size: 32rpx;
				line-height: 1;
				background-size: auto 100%; 
				background-position: 0 center;
				background-repeat: no-repeat;
				&.title_1 {
					background-image: url('../../static/icons/阵地建设.png');
				}
				&.title_2 {
					background-size: auto 1em; 
					background-image: url('../../static/icons/亮点.png');
				}
				&.title_3 {
					background-image: url('../../static/icons/参观须知.png');
				}
			}
		}
		.footer {
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			padding: 30rpx;
			color: #fff;
			font-size: 24rpx;
			.icons {
				margin: 0 auto;
				width: 120rpx;
				height: 120rpx;
				background-size: 100% 100%;
				background-color: #0f78ff;
				background-image: url('../../static/icons/来源.jpg');
			}
			
		}
	}
</style>
